<template>
  <view :class="['flex-center bg-white radio-20 notice-container', locale]" v-if="show" @click="handleClick">
    <view class="icon-box">
      <image :src="`/static/icon/alert/${prompt ? 'prompt' : 'notice' }.svg`"
             :class="['icon',{'icon-rtl': locale === 'ug-CN' && !prompt}]"/>
    </view>
    <view class="flex-1 notice-content">
      <text class="notice-text" :class="animationClass"
            :style="{ animationDuration: `${speed}s` }">{{ text }}
      </text>
    </view>
    <view v-if="closeable" class="icon-box" @click.stop="handleClose">
      <image src="/static/icon/alert/close.svg" class="icon"/>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NoticeBar',
  props: {
    text: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      default: true
    },
    speed: {
      type: Number,
      default: 10
    },
    closeable: {
      type: Boolean,
      default: false
    },
    prompt: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  computed: {
    animationClass() {
      return this.locale === 'ug-CN' ? 'notice-scroll-rtl' : 'notice-scroll-ltr'
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleClick() {
      if (this.url) {
        uni.navigateTo({url: this.url})
      }
      this.$emit('click')
    },
  }
}
</script>

<style lang="scss" scoped>

.notice-container {
  width: 100%;
  padding: 26rpx 20rpx;
  overflow: hidden;
}

.icon-box {
  padding: 0 12rpx;
  display: flex;
  align-items: center;

  .icon {
    width: 40rpx;
    height: 40rpx;
  }
}

.notice-content {
  overflow: hidden; /* 确保内容溢出部分不显示 */
  display: flex;
  align-items: center;
  white-space: nowrap; /* 防止文本换行 */
  width: auto; /* 不指定宽度，内容宽度自适应 */
  line-height: initial;
}

.icon-rtl {
  transform: rotate(180deg); /* 如果需要旋转图标 */
}

.notice-text {
  font-size: 34rpx;
  color: #FF7D00;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 从左到右滚动 */
.notice-scroll-ltr {
  animation-name: notice-scroll-ltr;
}

/* 从右到左滚动 */
.notice-scroll-rtl {
  animation-name: notice-scroll-rtl;
}

/* 从左到右滚动的关键帧 */
@keyframes notice-scroll-ltr {
  0% {
    transform: translateX(100%); /* 从右边开始 */
  }
  100% {
    transform: translateX(-100%); /* 滚动到左边 */
  }
}

/* 从右到左滚动的关键帧 */
@keyframes notice-scroll-rtl {
  0% {
    transform: translateX(-100%); /* 从左边开始 */
  }
  100% {
    transform: translateX(100%); /* 滚动到右边 */
  }
}
</style>
